// 我是棋盘中列组件
import React from "react";
import { SPAE ,BLACK_CHESS } from "../constants/checkboard"
import propTypes from "prop-types"

export default class BoardCol extends React.Component {
    static propTypes = {
        onColClick:propTypes.func
    } 
    handleClick() {
        const { row, col, value } = this.props
        // 根据 value值判断只有是空格的时候才能落子
        if (value === SPAE) {
            this.props.onColClick(row, col)
        }
    }

    render() {
        const { row, col, value } = this.props
        console.log("value的值" + value);

        // 样式的设置
        let rowStyle = {}
        let colStyle = {}
        if (row === 0) {
            colStyle = {
                height: "50%",
                top: "50%"
            }
        }
        if (row === 14) {
            colStyle = {
                height: "50%",
                top:"0"
            }
        }
        if (col === 0) {
            rowStyle = {
                width: "50%",
                left: "50%"
            }
        }
        if (col === 14) {
            rowStyle = {
                width: "50%",
                left:"0"
            }
        }
        return (
            <div className="Bo" onClick={this.handleClick.bind(this)}>
                <div style={rowStyle} className="colRow"></div>
                <div style={colStyle} className="colCol"></div>
                {
                    value !==SPAE &&
                    <div style={{backgroundColor:value===BLACK_CHESS?'black':'white'}} className="chess"></div>
                }
            </div>
        )
    }
}